<!--
 * @Author: 杨超
 * @Date: 2021-08-06 17:25:51
 * @LastEditTime: 2021-09-26 14:27:11
 * @LastEditors: 杨超
 * @Description:
-->
<template>
    <el-cascader
        ref="cascader"
        v-model="ids"
        v-bind="$attrs"
        :disabled="disabled || allDisabled"
        :options="options"
        :props="props"
        style="width: 100%"
        :placeholder="disabled ? '请先选择公路与方向' : '请选择'"
        @change="change"
    />
</template>

<script>
import { MaintenanceProjectModel } from '@/models'
import { BTCBridgeModel, BTCTunnelModel } from '@/models'

export default {
    name: 'FacilitySelect',
    props: {
        allDisabled: {
            type: Boolean,
            default: false
        },
        params: {
            type: Object,
            default: () => ({})
        },
        props: {
            type: Object,
            default: () => ({
                value: 'value',
                label: 'label',
                multiple: false
            })
        },
        value: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            bridgeModel: new BTCBridgeModel(), // 桥梁
            tunnelModel: new BTCTunnelModel(), // 隧道
            model: new MaintenanceProjectModel(),
            ids: this.value,
            options: []
        }
    },
    computed: {
        disabled() {
            const values = Object.values(this.params)
            // 如果筛选条件对象有值，且每项值都为真值
            if (values.length > 0 && !values.some((item) => !item)) {
                // this.getList()
                this.init()
                return false
            }
            return true
        }
    },
    watch: {
        params: {
            handler: function (newValue) {
                console.log(newValue)
                // 需要回显
                this.ids = this.value
                // const values = Object.values(newValue)
                // // 如果筛选条件对象有值，且每项值都为真值
                // if (values.length > 0 && !values.some(item => !item)) {
                //     this.getList()
                //     this.disabled = false
                // }
            },
            deep: true
        }
    },
    // created() {
    //     this.getList()
    // },
    methods: {
        change(val) {
            this.$emit('update:value', val || [])
            this.$emit('change', val, this.options)
            if (!this.ids || this.ids.length === 0) {
                return
            }
            this.$nextTick(() => {
                const checkedNodes = this.$refs['cascader'].getCheckedNodes()
                let name = []
                let lngLat = []
                // 如果是多选，拼接名称
                if (this.props.multiple) {
                    checkedNodes.forEach((item) => {
                        name.push(item.pathLabels.join('/'))
                        lngLat.push(item.data.lngLat)
                    })
                    name = name.join(',')
                } else {
                    name = checkedNodes[0].pathLabels.join('/')
                    lngLat = [checkedNodes[0].data.lngLat]
                }
                this.$emit('update:name', name)
                this.$emit('update:lngLat', lngLat)
            })
        },
        async init() {
            await Promise.all([this.getBridgeList(), this.getTunnelList()]).then((res) => {
                this.options = [
                    {
                        name: '桥梁',
                        id: 1,
                        children: res[0]
                    },
                    {
                        name: '隧道',
                        id: 2,
                        children: res[1]
                    }
                ]
                if (this.ids && this.ids.length > 0) {
                    this.$nextTick(() => {
                        const checkedNodes = this.$refs['cascader'].getCheckedNodes()
                        let name = []
                        let lngLat = []
                        // 如果是多选，拼接名称
                        if (this.props.multiple) {
                            checkedNodes.forEach((item) => {
                                name.push(item.pathLabels.join('/'))
                                lngLat.push(item.data.lngLat)
                            })
                            name = name.join(',')
                        } else {
                            name = checkedNodes[0].pathLabels.join('/')
                            lngLat = [checkedNodes[0].data.lngLat]
                        }
                        this.$emit('update:name', name)
                        this.$emit('update:lngLat', lngLat)
                    })
                }
            })
        },
        // getList() {
        //     this.model.getFacilityList(this.params).then((res) => {
        //         console.log('getFacilityList :>> ', res)
        //         this.options = res
        //         if (this.ids && this.ids.length > 0) {
        //             this.$nextTick(() => {
        //                 const checkedNodes = this.$refs['cascader'].getCheckedNodes()
        //                 let name = []
        //                 let lngLat = []
        //                 // 如果是多选，拼接名称
        //                 if (this.props.multiple) {
        //                     checkedNodes.forEach((item) => {
        //                         name.push(item.pathLabels.join('/'))
        //                         lngLat.push(item.data.lngLat)
        //                     })
        //                     name = name.join(',')
        //                 } else {
        //                     name = checkedNodes[0].pathLabels.join('/')
        //                     lngLat = [checkedNodes[0].data.lngLat]
        //                 }
        //                 this.$emit('update:name', name)
        //                 this.$emit('update:lngLat', lngLat)
        //             })
        //         }
        //     })
        // },
        getBridgeList() {
            return this.bridgeModel.getList({ highwayCode: this.params.roadCode, pageSize: 10000 }).then((res) => {
                return res.list.map((item) => {
                    return {
                        id: item.code,
                        name: item.name + item.direction,
                        lngLat: item.centerLngAndLat
                    }
                })
            })
        },
        getTunnelList() {
            return this.tunnelModel.getTunnelList({ highwayCode: this.params.roadCode, pageSize: 10000 }).then((res) => {
                return res.list.map((item) => {
                    return {
                        id: item.code,
                        name: item.name + item.direction,
                        lngLat: item.centerLngAndLat
                    }
                })
            })
        },
    }
}
</script>

<style lang="scss" scoped>
</style>
